<template>
  <el-config-provider :locale="zhCn">
    <div class="bulk-sending">
      <!-- 主要内容区域 -->
      <div style="display: flex; gap: 2rem; height: calc(100vh); overflow: hidden">
        <div
          style="
            width: 75%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 0.25rem;
            box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);
          "
        >
          <el-form :model="addTaskForm" label-width="8.75rem" class="task-form">
            <div class="form-section">
              <div class="form-title">
                微信配置
                <el-tooltip content="配置微信自动化功能：自动通过好友申请并发送打招呼消息，提升客户转化效率" placement="top" effect="dark">
                  <el-icon class="tips-icon">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </div>
              <div class="form-content">
                <div class="switch-group">
                  <el-form-item label="自动通过好友" required>
                    <el-tooltip :content="autoFriendTip" placement="top">
                      <el-switch v-model="addTaskForm.automaticFriendAcceptance" :active-value="2" :inactive-value="1" />
                    </el-tooltip>
                  </el-form-item>
                  <el-form-item label="自动打招呼" required>
                    <el-tooltip :content="autoGreetTip" placement="top">
                      <el-switch
                        v-model="addTaskForm.automaticGreetings"
                        :active-value="2"
                        :inactive-value="1"
                        :disabled="addTaskForm.automaticFriendAcceptance !== 2"
                      />
                    </el-tooltip>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
          <div class="selectSend">
            <el-tabs v-model="activeMessageType" class="message-tabs">
              <el-tab-pane label="文本" name="text">
                <el-form-item label="文本内容" required>
                  <el-input v-model="currentMessage.text" type="textarea" :rows="4" placeholder="请输入文本内容" maxlength="2000" show-word-limit />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="图片" name="image">
                <el-form-item label="图片上传" required>
                  <el-upload
                    class="image-uploader"
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleImageChange"
                    :on-remove="handleRemoveImage"
                    :on-preview="handlePreviewImage"
                    accept="image/*"
                    :disabled="imageUploading"
                  >
                    <div v-if="imageUploading" class="upload-loading-wrapper">
                      <el-icon class="loading-icon is-loading" :size="30"><Loading /></el-icon>
                    </div>
                    <div v-else-if="currentMessage.imageUrl" class="preview-image-wrapper">
                      <img :src="currentMessage.imageUrl" class="preview-image" />
                      <el-icon class="remove-image-icon" @click.stop="handleRemoveImage"><Close /></el-icon>
                    </div>
                    <el-icon v-else class="upload-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="视频" name="video">
                <el-form-item label="视频上传" required>
                  <el-upload
                    class="video-uploader"
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleVideoChange"
                    accept=".mp4"
                    :disabled="videoUploading"
                  >
                    <div v-if="videoUploading" class="upload-loading-wrapper">
                      <el-icon class="loading-icon is-loading" :size="30"><Loading /></el-icon>
                    </div>
                    <div v-else-if="currentMessage.videoUrl" class="preview-video-wrapper">
                      <video :src="currentMessage.videoUrl" class="preview-video" controls />
                      <el-icon class="remove-video-icon" @click.stop="handleRemoveVideo"><Close /></el-icon>
                    </div>
                    <el-icon v-else class="upload-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-tab-pane>

              <!-- <el-tab-pane label="链接" name="link">
                <el-form-item label="链接地址" required>
                  <el-input v-model="currentMessage.linkUrl" placeholder="请输入链接地址" />
                </el-form-item>
                <el-form-item label="链接标题">
                  <el-input v-model="currentMessage.linkTitle" placeholder="请输入链接标题" />
                </el-form-item>
                <el-form-item label="链接描述">
                  <el-input v-model="currentMessage.linkDesc" type="textarea" :rows="2" placeholder="请输入链接描述" maxlength="2000" show-word-limit />
                </el-form-item>
              </el-tab-pane> -->
            </el-tabs>

            <div class="message-actions">
              <el-button type="primary" @click="handleAddMessage">添加单条</el-button>
            </div>

            <div class="message-preview-item-list">
              <div class="preview-title" v-if="messageList.length > 0">
                已添加消息列表
                <el-button type="primary" link @click="showMessagePreviewDialog">
                  <el-icon><ZoomIn /></el-icon>
                </el-button>
              </div>
              <div class="message-preview-item-list">
                <el-card
                  v-for="(message, index) in messageList"
                  :key="message.text || message.imageUrl || message.videoUrl || message.linkUrl"
                  class="message-preview-item"
                >
                  <div class="preview-header">
                    <div class="message-info">
                      <span class="message-type-tag" :class="message.type">{{ getMessageTypeLabel(message.type) }}</span>
                      <div class="message-content">
                        <template v-if="message.type === 'text'">
                          {{ message.text }}
                        </template>
                        <template v-else-if="message.type === 'image'">
                          <img :src="message.imageUrl" class="preview-image" />
                        </template>
                        <template v-else-if="message.type === 'video'">
                          <video :src="message.videoUrl" class="preview-video" controls />
                        </template>
                        <template v-else-if="message.type === 'link'">
                          <div class="link-preview">
                            <div class="link-title">{{ message.linkTitle }}</div>
                            <div class="link-url">{{ message.linkUrl }}</div>
                            <div class="link-desc">{{ message.linkDesc }}</div>
                          </div>
                        </template>
                      </div>
                    </div>
                    <div class="preview-actions">
                      <div class="action-buttons">
                        <el-button type="primary" link :disabled="index === 0" @click="handleMoveMessage(index, 'up')">
                          <el-icon><ArrowUp /></el-icon>
                        </el-button>
                        <el-button type="primary" link :disabled="index === messageList.length - 1" @click="handleMoveMessage(index, 'down')">
                          <el-icon><ArrowDown /></el-icon>
                        </el-button>
                        <el-button type="danger" link @click="handleDeleteMessage(index)">
                          <el-icon><Delete /></el-icon>
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>

            <div class="save-actions">
              <el-button type="primary" @click="saveConfig">保存配置</el-button>
            </div>
          </div>
        </div>
        <UserMessagePreview :messages="messageList" style="width: 25%; height: 100%; overflow: hidden" />
      </div>
    </div>
  </el-config-provider>

  <!-- 消息预览弹窗 -->
  <ZoomInMessagePreview
    v-model="messagePreviewDialogVisible"
    :messages="messageList"
    :readonly="false"
    @move-message="handleMoveMessage"
    @delete-message="handleDeleteMessage"
  />
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted, computed } from 'vue';
import { Plus, ArrowUp, ArrowDown, Delete, ZoomIn, Close, Loading, QuestionFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { getAutoGreetList, addAutoGreetConfig, updateAutoGreetConfig } from '@/api/userRate/autoGreet';
import { uploadFile } from '@/api/userRate/bulkSending';
import ZoomInMessagePreview from '@/components/MessagePreview/ZoomInMessagePreview.vue';
import UserMessagePreview from '@/components/MessagePreview/UserMessagePreview.vue';

// 消息类型定义
interface Message {
  type: 'text' | 'image' | 'video' | 'link';
  data: string;
  text?: string;
  imageUrl?: string;
  videoUrl?: string;
  linkUrl?: string;
  linkTitle?: string;
  linkDesc?: string;
}

// 后端消息数据接口
interface BackendMessage {
  type: string;
  text?: string;
  imageUrl?: string;
  videoUrl?: string;
  linkUrl?: string;
  linkTitle?: string;
  linkDesc?: string;
}

// 获取本地存储的微信ID
const getWechatAccountId = () => {
  const msgProfile = localStorage.getItem('msgprofile');
  if (msgProfile) {
    const profile = JSON.parse(msgProfile);
    return profile.wx_id;
  }
  return '';
};

// 图片基础URL
const imgBaseUrl = import.meta.env.VITE_GLOB_APP_IMG_URL;

// 添加消息预览弹窗相关的状态
const messagePreviewDialogVisible = ref(false);

// 添加任务表单
const addTaskForm = reactive({
  automaticGreetings: 1,
  automaticFriendAcceptance: 1,
  material: {
    type: 'text' as const,
    text: ''
  }
});

// 配置ID
const configId = ref<number | null>(null);

// 获取配置列表
const fetchConfigList = async () => {
  try {
    const wechatAccountId = getWechatAccountId();
    if (!wechatAccountId) {
      ElMessage.error('未获取到微信账号ID');
      return;
    }

    const res = await getAutoGreetList({ wechatAccountId });
    if (res.data && res.data.length > 0) {
      const config = res.data[0];
      configId.value = config.id;
      addTaskForm.automaticGreetings = config.automaticGreetings;
      addTaskForm.automaticFriendAcceptance = config.automaticFriendAcceptance;

      // 处理消息数据
      if (config.messageData && Array.isArray(config.messageData)) {
        messageList.value = config.messageData.map((msg: BackendMessage) => ({
          type: msg.type as Message['type'],
          data: msg.text || msg.imageUrl || msg.videoUrl || msg.linkUrl || '',
          text: msg.text || '',
          imageUrl: msg.imageUrl || '',
          videoUrl: msg.videoUrl || '',
          linkUrl: msg.linkUrl || '',
          linkTitle: msg.linkTitle || '',
          linkDesc: msg.linkDesc || ''
        }));
      }
    }
  } catch (error) {
    console.error('获取配置列表失败:', error);
    ElMessage.error('获取配置列表失败');
  }
};

// 保存配置
const saveConfig = async () => {
  try {
    const wechatAccountId = getWechatAccountId();
    if (!wechatAccountId) {
      ElMessage.error('未获取到微信账号ID');
      return;
    }

    const data = {
      wechatAccountId,
      automaticFriendAcceptance: addTaskForm.automaticFriendAcceptance,
      automaticGreetings: addTaskForm.automaticGreetings,
      automaticLikes: 2, // 默认关闭
      messageData: messageList.value.map((msg: Message) => ({
        type: msg.type,
        text: msg.text || '',
        imageUrl: msg.imageUrl || '',
        videoUrl: msg.videoUrl || '',
        linkUrl: msg.linkUrl || '',
        linkTitle: msg.linkTitle || '',
        linkDesc: msg.linkDesc || ''
      }))
    };

    if (configId.value) {
      // 更新配置
      await updateAutoGreetConfig({
        ...data,
        id: configId.value
      });
      ElMessage.success('更新配置成功');
    } else {
      // 新增配置
      await addAutoGreetConfig(data);
      ElMessage.success('新增配置成功');
    }
  } catch (error) {
    console.error('保存配置失败:', error);
    ElMessage.error('保存配置失败');
  }
};

// 页面加载时获取配置
onMounted(() => {
  fetchConfigList();
});

// 消息格式选择相关
const activeMessageType = ref<'text' | 'image' | 'video' | 'link'>('text');
const currentMessage = ref<Message>({
  type: 'text',
  data: '',
  text: '',
  imageUrl: '',
  videoUrl: '',
  linkUrl: '',
  linkTitle: '',
  linkDesc: ''
});
const messageList = ref<Message[]>([]);

const handleAddMessage = () => {
  // 根据不同的消息类型验证必填内容
  let isValid = true;
  let errorMessage = '';

  switch (activeMessageType.value) {
    case 'text':
      if (!currentMessage.value.text?.trim()) {
        isValid = false;
        errorMessage = '请输入文本内容';
      } else if (currentMessage.value.text.length > 2000) {
        isValid = false;
        errorMessage = '文本内容不能超过2000个字符';
      }
      break;
    case 'image':
      if (!currentMessage.value.imageUrl) {
        isValid = false;
        errorMessage = '请上传图片';
      }
      break;
    case 'video':
      if (!currentMessage.value.videoUrl) {
        isValid = false;
        errorMessage = '请上传视频';
      }
      break;
    case 'link':
      if (!currentMessage.value.linkUrl?.trim()) {
        isValid = false;
        errorMessage = '请输入链接地址';
      }
      break;
  }

  if (!isValid) {
    ElMessage.warning(errorMessage);
    return;
  }

  const newMessage: Message = {
    type: activeMessageType.value,
    data: currentMessage.value.text || currentMessage.value.imageUrl || currentMessage.value.videoUrl || currentMessage.value.linkUrl || '',
    text: currentMessage.value.text,
    imageUrl: currentMessage.value.imageUrl,
    videoUrl: currentMessage.value.videoUrl,
    linkUrl: currentMessage.value.linkUrl,
    linkTitle: currentMessage.value.linkTitle,
    linkDesc: currentMessage.value.linkDesc
  };

  messageList.value.push(newMessage);
  currentMessage.value = {
    type: 'text',
    data: '',
    text: '',
    imageUrl: '',
    videoUrl: '',
    linkUrl: '',
    linkTitle: '',
    linkDesc: ''
  };
};

const imageUploading = ref(false);
const videoUploading = ref(false);

const handleImageChange = async (event: { raw: File }) => {
  if (activeMessageType.value !== 'image') {
    ElMessage.warning('请先选择"图片"类型再上传图片');
    return;
  }
  const file = event.raw;
  if (file) {
    if (!file.type.startsWith('image/')) {
      ElMessage.error('只支持图片格式的文件');
      return;
    }

    // 检查文件大小限制（100MB = 100 * 1024 * 1024 bytes）
    const maxSize = 100 * 1024 * 1024; // 100MB
    if (file.size > maxSize) {
      ElMessage.error(`文件大小不能超过100MB，当前文件大小：${(file.size / 1024 / 1024).toFixed(2)}MB`);
      return;
    }

    imageUploading.value = true;
    try {
      const response = await uploadFile(file);
      if (response.data) {
        currentMessage.value.imageUrl = imgBaseUrl + response.data;
        ElMessage.success('图片上传成功');
      }
    } catch (error) {
      console.error('图片上传失败:', error);
      ElMessage.error('图片上传失败');
    } finally {
      imageUploading.value = false;
    }
  }
};

const handleVideoChange = async (event: { raw: File }) => {
  if (activeMessageType.value !== 'video') {
    ElMessage.warning('请先选择"视频"类型再上传视频');
    return;
  }
  const file = event.raw;
  if (file) {
    if (!file.type.includes('mp4') && !file.name.toLowerCase().endsWith('.mp4')) {
      ElMessage.error('只支持MP4格式的视频文件');
      return;
    }

    // 检查文件大小限制（100MB = 100 * 1024 * 1024 bytes）
    const maxSize = 100 * 1024 * 1024; // 100MB
    if (file.size > maxSize) {
      ElMessage.error(`文件大小不能超过100MB，当前文件大小：${(file.size / 1024 / 1024).toFixed(2)}MB`);
      return;
    }

    videoUploading.value = true;
    try {
      const response = await uploadFile(file);
      if (response.data) {
        currentMessage.value.videoUrl = imgBaseUrl + response.data;
        ElMessage.success('视频上传成功');
      }
    } catch (error) {
      console.error('视频上传失败:', error);
      ElMessage.error('视频上传失败');
    } finally {
      videoUploading.value = false;
    }
  }
};

const getMessageTypeLabel = (type: Message['type']) => {
  const typeMap = {
    text: '文本',
    image: '图片',
    video: '视频',
    link: '链接'
  };
  return typeMap[type];
};

// 消息容器引用
const messageContainer = ref<HTMLElement | null>(null);

// 监听消息列表变化，自动滚动到底部
watch(
  messageList,
  () => {
    nextTick(() => {
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
      }
    });
  },
  { deep: true }
);

const handleRemoveImage = () => {
  currentMessage.value.imageUrl = '';
};
const handleRemoveVideo = () => {
  currentMessage.value.videoUrl = '';
};

const handlePreviewImage = () => {
  if (currentMessage.value.imageUrl) {
    window.open(currentMessage.value.imageUrl, '_blank');
  }
};

const autoGreetTip = computed(() => {
  if (addTaskForm.automaticFriendAcceptance !== 2) {
    return '请先开启自动通过好友';
  }
  return addTaskForm.automaticGreetings === 1 ? '按下后开启' : '按下后关闭';
});
const autoFriendTip = computed(() => (addTaskForm.automaticFriendAcceptance === 1 ? '按下后自动通过' : '按下后手动通过'));

const showMessagePreviewDialog = () => {
  messagePreviewDialogVisible.value = true;
};

const handleMoveMessage = (index: number, direction: 'up' | 'down') => {
  if (index >= 0 && index < messageList.value.length) {
    const temp = messageList.value[index];
    if (direction === 'up') {
      messageList.value[index] = messageList.value[index - 1];
      messageList.value[index - 1] = temp;
    } else if (direction === 'down') {
      messageList.value[index] = messageList.value[index + 1];
      messageList.value[index + 1] = temp;
    }
  }
};

const handleDeleteMessage = (index: number) => {
  if (index >= 0 && index < messageList.value.length) {
    messageList.value.splice(index, 1);
  }
};

// 在<script setup lang="ts">内添加watch监听
watch(
  () => addTaskForm.automaticFriendAcceptance,
  (newVal) => {
    if (newVal !== 2) {
      addTaskForm.automaticGreetings = 1;
    }
  }
);
</script>

<style lang="scss" scoped>
.bulk-sending {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);

  .task-form {
    background: #fff;
    padding: 1.25rem;
    padding-bottom: 0;
    // border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);

    .form-section {
      .form-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #303133;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 0.0625rem solid #ebeef5;
      }

      .form-content {
        .switch-group {
          display: flex;
          gap: 2rem;
          align-items: center;
          border-radius: 0.5rem;
          transition: all 0.3s ease;
        }
      }
    }
  }

  .selectSend {
    flex: 1;
    background: #fff;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .message-tabs {
      :deep(.el-tabs__header) {
        margin-bottom: 1.5rem;
      }

      :deep(.el-tabs__nav) {
        border: none;
      }

      :deep(.el-tabs__item) {
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.875rem;
        color: #606266;
        padding: 0 1.25rem;

        &.is-active {
          color: #409eff;
          font-weight: 500;
        }
      }

      .el-form-item {
        margin-bottom: 1.5rem;

        &:last-child {
          margin-bottom: 0;
        }

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #303133;
        }
      }

      .image-uploader,
      .video-uploader {
        border: 0.0625rem dashed #d9d9d9;
        border-radius: 0.5rem;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 7.5rem;
        height: 7.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;

        &:hover {
          border-color: #409eff;
          background: #f5f7fa;
        }

        .upload-icon {
          font-size: 1.75rem;
          color: #8c939d;
          transition: all 0.3s;
        }

        &:hover .upload-icon {
          color: #409eff;
        }

        .preview-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .preview-video {
          width: 100%;
          max-height: 11.125rem;
        }
      }
    }

    .message-actions {
      margin-top: 1.25rem;
      display: flex;
      justify-content: flex-end;
    }

    .message-preview-item-list {
      flex: 1;
      padding-right: 10px;
      padding: 10px;
      height: 90%;
      overflow: hidden;

      &::-webkit-scrollbar {
        width: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #c0c4cc;
        border-radius: 0.1875rem;
      }

      &::-webkit-scrollbar-track {
        background-color: #f5f7fa;
      }

      .preview-title {
        font-size: 1rem;
        font-weight: bold;
        color: #303133;
      }
      .message-preview-item-list {
        overflow-y: auto;
        padding-right: 10px;
        padding: 10px;
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #c0c4cc;
          border-radius: 3px;
        }
        &::-webkit-scrollbar-track {
          background-color: #f5f7fa;
        }
      }
      .message-preview-item {
        margin-bottom: 0.6rem;
        transition: all 0.3s;
        border: 0.0625rem solid #ebeef5;
        border-radius: 0.5rem;
        overflow: hidden;

        &:hover {
          transform: translateY(-0.125rem);
          box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
        }

        :deep(.el-card__body) {
          padding: 1rem !important;
        }

        .preview-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 1rem;

          .message-info {
            flex: 1;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;

            .message-type-tag {
              padding: 0.25rem 0.5rem;
              border-radius: 0.25rem;
              font-size: 0.75rem;
              font-weight: 500;
              white-space: nowrap;
              flex-shrink: 0;

              &.text {
                background-color: #e6f7ff;
                color: #1890ff;
              }

              &.image {
                background-color: #f6ffed;
                color: #52c41a;
              }

              &.video {
                background-color: #fff7e6;
                color: #fa8c16;
              }

              &.link {
                background-color: #f9f0ff;
                color: #722ed1;
              }
            }

            .message-content {
              flex: 1;
              min-width: 0;
              font-size: 0.875rem;
              color: #606266;
              word-break: break-all;
              white-space: pre-wrap;
              line-height: 2;

              .preview-image {
                max-width: 6.25rem;
                max-height: 6.25rem;
                border-radius: 0.5rem;
                box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
              }

              .preview-video {
                max-width: 6.25rem;
                max-height: 6.25rem;
                border-radius: 0.5rem;
                box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
              }
            }
          }

          .preview-actions {
            flex-shrink: 0;

            .action-buttons {
              display: flex;
              gap: 0.5rem;
              align-items: center;

              .el-button {
                padding: 0.25rem;

                &.is-disabled {
                  opacity: 0.5;
                  cursor: not-allowed;
                }

                .el-icon {
                  font-size: 1rem;
                }
              }
            }
          }
        }
      }
    }

    .save-actions {
      display: flex;
      justify-content: flex-end;
      padding: 1rem 0;
      margin-top: 1rem;
      border-top: 1px solid #ebeef5;
    }
  }
}
.remove-image-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  color: #f56c6c;
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  z-index: 2;
}
.remove-video-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  color: #f56c6c;
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  z-index: 2;
}
.upload-loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}
.loading-icon {
  font-size: 30px;
  color: #409eff;
}
.tips-icon {
  margin-left: 8px;
  color: #909399;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    color: #409eff;
  }
}

.form-title {
  display: flex;
  align-items: center;
}
</style>
